<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Kitchen Sink | Cypress Example">
  <meta name="author" content="Cypress.io">
  <meta name="copyright" content="Cypress.io, Inc">

  <title>Cypress.io: Kitchen Sink</title>

  <link rel="icon" href="/assets/img/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="/assets/css/vendor/bootstrap.min.css">
  <link rel="stylesheet" href="/assets/css/vendor/fira.css">
  <link rel="stylesheet" href="/assets/css/styles.css">
</head>

<body>
  <nav class="navbar navbar-inverse">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">cypress.io</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active" class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Commands <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="/commands/querying">Querying</a></li>
              <li><a href="/commands/traversal">Traversal</a></li>
              <li class="active"><a href="/commands/actions">Actions</a></li>
              <li><a href="/commands/window">Window</a></li>
              <li><a href="/commands/viewport">Viewport</a></li>
              <li><a href="/commands/location">Location</a></li>
              <li><a href="/commands/navigation">Navigation</a></li>
              <li><a href="/commands/assertions">Assertions</a></li>
              <li><a href="/commands/misc">Misc</a></li>
              <li><a href="/commands/connectors">Connectors</a></li>
              <li><a href="/commands/aliasing">Aliasing</a></li>
              <li><a href="/commands/waiting">Waiting</a></li>
              <li><a href="/commands/network-requests">Network Requests</a></li>
              <li><a href="/commands/files">Files</a></li>
              <li><a href="/commands/storage">Storage</a></li>
              <li><a href="/commands/cookies">Cookies</a></li>
              <li><a href="/commands/spies-stubs-clocks">Spies, Stubs &amp; Clocks</a></li>
            </ul>
          </li>
          <li><a href="/utilities">Utilities</a></li>
          <li><a href="/cypress-api">Cypress API</a></li>
        </ul>
        <ul class="nav navbar-nav pull-right">
          <li><a href="https://github.com/cypress-io/cypress-example-kitchensink">GitHub</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="banner">
    <div class="container">
      <h1>Actions</h1>
      <p>Examples of actions being performed on DOM elements in Cypress, for a full reference of commands, go to <a href="https://on.cypress.io/api" target="_blank">docs.cypress.io</a>
      </p>
    </div>
  </div>
  <div class="container content-container">
    <div id="actions">
      <div class="row">

        <div class="col-xs-7">
          <h4 id="type"><a href="https://on.cypress.io/type">.type()</a></h4>
          <p>To type into a DOM element, use the <a href="https://on.cypress.io/type"><code>.type()</code></a> command.</p>
          <pre><code class="javascript">cy.get('.action-email').type('fake@email.com')
cy.get('.action-email').should('have.value', 'fake@email.com')

// .type() with special character sequences
cy.get('.action-email').type('{leftarrow}{rightarrow}{uparrow}{downarrow}')
cy.get('.action-email').type('{del}{selectall}{backspace}')

// .type() with key modifiers
cy.get('.action-email').type('{alt}{option}') // these are equivalent
cy.get('.action-email').type('{ctrl}{control}') // these are equivalent
cy.get('.action-email').type('{meta}{command}{cmd}') // these are equivalent
cy.get('.action-email').type('{shift}')

// Delay each keypress by 0.1 sec
cy.get('.action-email').type('slow.typing@email.com', { delay: 100 })
cy.get('.action-email').should('have.value', 'slow.typing@email.com')

cy.get('.action-disabled')
  // Ignore error checking prior to type
  // like whether the input is visible or disabled
  .type('disabled error checking', { force: true })
cy.get('.action-disabled').should('have.value', 'disabled error checking')</code></pre>
        </div>
        <div class="col-xs-5">
          <div class="well">
            <form>
              <div class="form-group">
                <label for="email1">Email address</label>
                <input type="email" class="form-control action-email" id="email1" placeholder="Email">
              </div>
              <div class="form-group">
                <label>Disabled Textarea</label>
                <textarea class="form-control action-disabled" disabled="disabled"></textarea>
              </div>
            </form>
          </div>
        </div>

        <div class="col-xs-12"><hr></div>

        <div class="col-xs-7">
          <h4 id="focus"><a href="https://on.cypress.io/focus">.focus()</a></h4>
          <p>To focus on a DOM element, use the <a href="https://on.cypress.io/focus"><code>.focus()</code></a> command.</p>
          <pre><code class="javascript">cy.get('.action-focus').focus()
cy.get('.action-focus').should('have.class', 'focus')
  .prev().should('have.attr', 'style', 'color: orange;')</code></pre>
        </div>
        <div class="col-xs-5">
          <div class="well">
            <form>
              <div class="form-group">
                <label for="password1">Password</label>
                <input type="password" class="form-control action-focus" id="password1" placeholder="Password">
              </div>
            </form>
          </div>
        </div>

        <div class="col-xs-12"><hr></div>

        <div class="col-xs-7">
          <h4 id="blur"><a href="https://on.cypress.io/blur">.blur()</a></h4>
          <p>To blur on a DOM element, use the <a href="https://on.cypress.io/blur"><code>.blur()</code></a> command.</p>
          <pre><code class="javascript">cy.get('.action-blur').type('About to blur')
cy.get('.action-blur').blur()
cy.get('.action-blur').should('have.class', 'error')
  .prev().should('have.attr', 'style', 'color: red;')
          </code></pre>
        </div>
        <div class="col-xs-5">
          <div class="well">
            <form>
              <div class="form-group">
                <label for="fullName1">Full Name</label>
                <input type="text" class="form-control action-blur" id="fullName1" placeholder="Enter your name">
              </div>
            </form>
          </div>
        </div>

        <div class="col-xs-12"><hr></div>

        <div class="col-xs-7">
          <h4 id="clear"><a href="https://on.cypress.io/clear">.clear()</a></h4>
          <p>To clear on a DOM element, use the <a href="https://on.cypress.io/clear"><code>.clear()</code></a> command.</p>
          <pre><code class="javascript">cy.get('.action-clear').type('Clear this text')
cy.get('.action-clear').should('have.value', 'Clear this text')
cy.get('.action-clear').clear()
cy.get('.action-clear').should('have.value', '')</code></pre>
        </div>
        <div class="col-xs-5">
          <div class="well">
            <form>
              <div class="form-group">
                <label for="description">Describe:</label>
                <input type="text" class="form-control action-clear" id="description">
              </div>
            </form>
          </div>
        </div>

        <div class="col-xs-12"><hr></div>

        <div class="col-xs-7">
          <h4 id="submit"><a href="https://on.cypress.io/submit">.submit()</a></h4>
          <p>To submit a form, use the <a href="https://on.cypress.io/submit"><code>cy.submit()</code></a> command.</p>
          <pre><code class="javascript">cy.get('.action-form')
  .find('[type="text"]').type('HALFOFF')

cy.get('.action-form').submit()
cy.get('.action-form').next().should('contain', 'Your form has been submitted!')</code></pre>
        </div>
        <div class="col-xs-5">
          <div class="well">
            <form class="action-form">
              <div class="form-group">
                <label for="couponCode1" val="HALFOFF">Coupon Code</label>
                <input type="text" class="form-control" id="couponCode1">
              </div>
              <button type="submit" class="btn btn-primary">Submit</button>
            </form>
          </div>
        </div>

        <div class="col-xs-12"><hr></div>

        <div class="col-xs-7">
          <h4 id="click"><a href="https://on.cypress.io/click">.click()</a></h4>
          <p>To click a DOM element, use the <a href="https://on.cypress.io/click"><code>.click()</code></a> command.</p>
          <pre><code class="javascript">cy.get('.action-btn').click()

// You can click on 9 specific positions of an element:
//  -----------------------------------
// | topLeft        top       topRight |
// |                                   |
// |                                   |
// |                                   |
// | left          center        right |
// |                                   |
// |                                   |
// |                                   |
// | bottomLeft   bottom   bottomRight |
//  -----------------------------------

// clicking in the center of the element is the default
cy.get('#action-canvas').click()

cy.get('#action-canvas').click('topLeft')
cy.get('#action-canvas').click('top')
cy.get('#action-canvas').click('topRight')
cy.get('#action-canvas').click('left')
cy.get('#action-canvas').click('right')
cy.get('#action-canvas').click('bottomLeft')
cy.get('#action-canvas').click('bottom')
cy.get('#action-canvas').click('bottomRight')

// .click() accepts an x and y coordinate
// that controls where the click occurs :)

cy.get('#action-canvas')
cy.get('#action-canvas').click(80, 75) // click 80px on x coord and 75px on y coord
cy.get('#action-canvas').click(170, 75)
cy.get('#action-canvas').click(80, 165)
cy.get('#action-canvas').click(100, 185)
cy.get('#action-canvas').click(125, 190)
cy.get('#action-canvas').click(150, 185)
cy.get('#action-canvas').click(170, 165)

// click multiple elements by passing multiple: true
cy.get('.action-labels>.label').click({ multiple: true })

// Ignore error checking prior to clicking
cy.get('.action-opacity>.btn').click({ force: true })</code></pre>
        </div>
        <div class="col-xs-5">
          <div class="well">
            <button type="button" class="btn btn-lg btn-danger action-btn" data-toggle="popover" title="Popover" data-placement="top" data-content="This popover shows up on click">Click to toggle popover</button>

            <hr>

            <h6>Canvas to Illustrate Click Positions</h6>
            <canvas width="250" height="250" id="action-canvas"></canvas>

            <hr>

            <div class="action-labels">
              <span class="label label-primary" data-toggle="popover" data-placement="bottom" data-content="clicked">click me</span>
              <span class="label label-primary" data-toggle="popover" data-placement="bottom" data-content="clicked">and me</span>
              <span class="label label-primary" data-toggle="popover" data-placement="bottom" data-content="clicked">and me</span>
              <span class="label label-primary" data-toggle="popover" data-placement="bottom" data-content="clicked">and me</span>
              <span class="label label-primary" data-toggle="popover" data-placement="bottom" data-content="clicked">and me</span>
              <span class="label label-primary" data-toggle="popover" data-placement="bottom" data-content="clicked">and me</span>
            </div>

            <hr>

            <div class="action-opacity">
              <button type="button" class="btn btn-lg btn-primary" data-toggle="popover" data-placement="left" data-content="This popover shows up because we forced the click on the button">I'm being covered</button>
              <div class="opacity-cover"></div>
            </div>
          </div>
        </div>
        <div class="col-xs-12"><hr></div>

        <div class="col-xs-7">
          <h4 id="dblclick"><a href="https://on.cypress.io/dblclick">.dblclick()</a></h4>
          <p>To double click a DOM element, use the <a href="https://on.cypress.io/dblclick"><code>.dblclick()</code></a> command.</p>
          <pre><code class="javascript">// Our app has a listener on 'dblclick' event in our 'scripts.js'
// that hides the div and shows an input on double click
cy.get('.action-div').dblclick()
cy.get('.action-div').should('not.be.visible')
cy.get('.action-input-hidden').should('be.visible')</code></pre>
        </div>
        <div class="col-xs-5">
          <div class="well">
            <form>
              <div class="form-group">
                <div class="action-div">Double click to edit</div>
                <input type="text" class="action-input-hidden hidden form-control" value="Double click to edit">
              </div>
            </form>
          </div>
        </div>

        <div class="col-xs-12"><hr></div>

        <div class="col-xs-7">
          <h4 id="rightclick"><a href="https://on.cypress.io/rightclick">.rightclick()</a></h4>
          <p>To right click a DOM element, use the <a href="https://on.cypress.io/rightclick"><code>.rightclick()</code></a>
            command.</p>
          <pre><code class="javascript">// Our app has a listener on 'contextmenu' event in our 'scripts.js'
// that hides the div and shows an input on right click
cy.get('.rightclick-action-div').rightclick()
cy.get('.rightclick-action-div').should('not.be.visible')
cy.get('.rightclick-action-input-hidden').should('be.visible')</code></pre>
        </div>
        <div class="col-xs-5">
          <div class="well">
            <form>
              <div class="form-group">
                <div class="rightclick-action-div">Right click to edit</div>
                <input type="text" class="rightclick-action-input-hidden hidden form-control" value="Right click to edit">
              </div>
            </form>
          </div>
        </div>

        <div class="col-xs-12">
          <hr>
        </div>

        <div class="col-xs-7">
          <h4 id="check"><a href="https://on.cypress.io/check">.check()</a></h4>
          <p>To check a checkbox or radio, use the <a href="https://on.cypress.io/check"><code>.check()</code></a> command.</p>
          <pre><code class="javascript">// By default, .check() will check all
// matching checkbox or radio elements in succession, one after another
cy.get('.action-checkboxes [type="checkbox"]').not('[disabled]').check()
cy.get('.action-checkboxes [type="checkbox"]').not('[disabled]').should('be.checked')

cy.get('.action-radios [type="radio"]').not('[disabled]').check()
cy.get('.action-radios [type="radio"]').not('[disabled]').should('be.checked')

// .check() accepts a value argument
cy.get('.action-radios [type="radio"]').check('radio1')
cy.get('.action-radios [type="radio"]').should('be.checked')

// .check() accepts an array of values
cy.get('.action-multiple-checkboxes [type="checkbox"]').check(['checkbox1', 'checkbox2'])
cy.get('.action-multiple-checkboxes [type="checkbox"]').should('be.checked')

// Ignore error checking prior to checking
cy.get('.action-checkboxes [disabled]').check({ force: true })
cy.get('.action-checkboxes [disabled]').should('be.checked')

cy.get('.action-radios [type="radio"]').check('radio3', { force: true })
cy.get('.action-radios [type="radio"]').should('be.checked')</code></pre>
        </div>
        <div class="col-xs-5">
          <div class="well">
            <div class="action-checkboxes">
              <div class="checkbox">
                <label>
                  <input type="checkbox" value="checkbox1">
                  Checkbox one has value "checkbox1"
                </label>
              </div>
              <div class="checkbox disabled">
                <label>
                  <input type="checkbox" value="checkbox2" disabled>
                  Checkbox two is disabled
                </label>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox" value="checkbox3">
                  Checkbox three has value "checkbox3"
                </label>
              </div>
            </div>

            <hr>

            <div class="action-multiple-checkboxes">
              <div class="checkbox">
                <label>
                  <input type="checkbox" value="checkbox1">
                  Checkbox one has value "checkbox1"
                </label>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox" value="checkbox2">
                  Checkbox two has value "checkbox2"
                </label>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox" value="checkbox3">
                  Checkbox three has value "checkbox3"
                </label>
              </div>
            </div>

            <hr>

            <div class="action-radios">
              <div class="radio">
                <label>
                  <input type="radio" name="optionsRadios" id="optionsRadios1" value="radio1">
                  Radio one has value "radio1"
                </label>
              </div>
              <div class="radio">
                <label>
                  <input type="radio" name="optionsRadios" id="optionsRadios2" value="radio2">
                  Radio two has value "radio2". When checked, it will uncheck Radio one.
                </label>
              </div>
              <div class="radio disabled">
                <label>
                  <input type="radio" name="optionsRadios" id="optionsRadios3" value="radio3" disabled>
                  Radio three is disabled
                </label>
              </div>
            </div>
          </div>
        </div>

        <div class="col-xs-12"><hr></div>

        <div class="col-xs-7">
          <h4 id="uncheck"><a href="https://on.cypress.io/uncheck">.uncheck()</a></h4>
          <p>To uncheck a checkbox or radio, use the <a href="https://on.cypress.io/uncheck"><code>.uncheck()</code></a> command.</p>
          <pre><code class="javascript">// By default, .uncheck() will uncheck all matching
// checkbox elements in succession, one after another
cy.get('.action-check [type="checkbox"]')
  .not('[disabled]')
  .uncheck()
cy.get('.action-check [type="checkbox"]')
  .not('[disabled]')
  .should('not.be.checked')

// .uncheck() accepts a value argument
cy.get('.action-check [type="checkbox"]')
  .check('checkbox1')
cy.get('.action-check [type="checkbox"]')
  .uncheck('checkbox1')
cy.get('.action-check [type="checkbox"][value="checkbox1"]')
  .should('not.be.checked')

// .uncheck() accepts an array of values
cy.get('.action-check [type="checkbox"]')
  .check(['checkbox1', 'checkbox3'])
cy.get('.action-check [type="checkbox"]')
  .uncheck(['checkbox1', 'checkbox3'])
cy.get('.action-check [type="checkbox"][value="checkbox1"]')
  .should('not.be.checked')
cy.get('.action-check [type="checkbox"][value="checkbox3"]')
  .should('not.be.checked')

// Ignore error checking prior to unchecking
cy.get('.action-check [disabled]').uncheck({ force: true })
cy.get('.action-check [disabled]').should('not.be.checked')</code></pre>
        </div>
        <div class="col-xs-5">
          <div class="well">
            <div class="action-check">
              <div class="checkbox">
                <label>
                  <input type="checkbox" value="checkbox1" checked>
                  Checkbox one has value "checkbox1"
                </label>
              </div>
              <div class="checkbox disabled">
                <label>
                  <input type="checkbox" value="checkbox2" disabled checked>
                  Checkbox two is disabled
                </label>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox" value="checkbox3" checked>
                  Checkbox three has value "checkbox3"
                </label>
              </div>
            </div>
          </div>
        </div>

        <div class="col-xs-12"><hr></div>

        <div class="col-xs-7">
          <h4 id="select"><a href="https://on.cypress.io/select">.select()</a></h4>
          <p>To select an option in a <code>select</code>, use the <a href="https://on.cypress.io/select"><code>.select()</code></a> command.</p>
          <pre><code class="javascript">// at first, no option should be selected
cy.get('.action-select')
  .should('have.value', '--Select a fruit--')

// Select option(s) with matching text content
cy.get('.action-select').select('apples')
// confirm the apples were selected
// note that each value starts with "fr-" in our HTML
cy.get('.action-select').should('have.value', 'fr-apples')

cy.get('.action-select-multiple')
  .select(['apples', 'oranges', 'bananas'])
cy.get('.action-select-multiple')
  // when getting multiple values, invoke "val" method first
  .invoke('val')
  .should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas'])

// Select option(s) with matching value
cy.get('.action-select').select('fr-bananas')
cy.get('.action-select')
  // can attach an assertion right away to the element
  .should('have.value', 'fr-bananas')

cy.get('.action-select-multiple')
  .select(['fr-apples', 'fr-oranges', 'fr-bananas'])
cy.get('.action-select-multiple')
  .invoke('val')
  .should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas'])

// assert the selected values include oranges
cy.get('.action-select-multiple')
  .invoke('val').should('include', 'fr-oranges')</code></pre>
        </div>
        <div class="col-xs-5">
          <div class="well">
            <form>
              <select class="form-control action-select">
                <option>--Select a fruit--</option>
                <option value="fr-apples">apples</option>
                <option value="fr-oranges">oranges</option>
                <option value="fr-bananas">bananas</option>
              </select>

              <select class="form-control action-select-multiple" multiple="true">
                <option value="fr-apples">apples</option>
                <option value="fr-oranges">oranges</option>
                <option value="fr-bananas">bananas</option>
              </select>
            </form>
          </div>
        </div>

        <div class="col-xs-12"><hr></div>

        <div class="col-xs-7">
          <h4 id="scrollIntoView"><a href="https://on.cypress.io/scrollintoview">.scrollIntoView()</a></h4>
          <p>To scroll an element into view, use the <a href="https://on.cypress.io/scrollintoview"><code>.scrollintoview()</code></a> command.</p>
          <pre><code class="javascript">// normally all of these buttons are hidden,
// because they're not within
// the viewable area of their parent
// (we need to scroll to see them)
cy.get('#scroll-horizontal button')
  .should('not.be.visible')

// scroll the button into view, as if the user had scrolled
cy.get('#scroll-horizontal button').scrollIntoView()
cy.get('#scroll-horizontal button')
  .should('be.visible')

cy.get('#scroll-vertical button')
  .should('not.be.visible')

// Cypress handles the scroll direction needed
cy.get('#scroll-vertical button').scrollIntoView()
cy.get('#scroll-vertical button')
  .should('be.visible')

cy.get('#scroll-both button')
  .should('not.be.visible')

// Cypress knows to scroll to the right and down
cy.get('#scroll-both button').scrollIntoView()
cy.get('#scroll-both button')
  .should('be.visible')</code></pre>
        </div>
        <div class="col-xs-5">
          <div class="well">
            <div id="scroll-horizontal" style="height: 300px; width: 300px; overflow: auto;">
              <div style="width: 1000px; position: relative;">
                Horizontal Scroll
                <button class="btn btn-danger" style="position: absolute; top: 0; left: 500px;">I'm Here</button>
              </div>
            </div>

            <div id="scroll-vertical" style="height: 300px; width: 300px; overflow: auto;">
              <div style="height: 1000px; position: relative;">
                Vertical Scroll
                <button class="btn btn-danger" style="position: absolute; top: 500px; left: 0">I'm Here</button>
              </div>
            </div>

            <div id="scroll-both"  style="height: 300px; width: 300px; overflow: auto;">
              <div style="width: 1000px; height: 1000px; position: relative;">
                Both Scroll
                <button class="btn btn-danger" style="position: absolute; top: 500px; left: 500px">I'm Here</button>
              </div>
            </div>
          </div>
        </div>

        <div class="col-xs-12"><hr></div>

        <div class="col-xs-7">
          <h4 id="scrollTo"><a href="https://on.cypress.io/scrollto">cy.scrollTo()</a></h4>
          <p>To scroll the window or a scrollable element to a specific position, use the <a href="https://on.cypress.io/scrollto"><code>cy.scrollTo()</code></a> command.</p>
          <pre><code class="javascript">// You can scroll to 9 specific positions of an element:
//  -----------------------------------
// | topLeft        top       topRight |
// |                                   |
// |                                   |
// |                                   |
// | left          center        right |
// |                                   |
// |                                   |
// |                                   |
// | bottomLeft   bottom   bottomRight |
//  -----------------------------------

// if you chain .scrollTo() off of cy, we will
// scroll the entire window
cy.scrollTo('bottom')

cy.get('#scrollable-horizontal').scrollTo('right')

// or you can scroll to a specific coordinate:
// (x axis, y axis) in pixels
cy.get('#scrollable-vertical').scrollTo(250, 250)

// or you can scroll to a specific percentage
// of the (width, height) of the element
cy.get('#scrollable-both').scrollTo('75%', '25%')

// control the easing of the scroll (default is 'swing')
cy.get('#scrollable-vertical').scrollTo('center', { easing: 'linear' })

// control the duration of the scroll (in ms)
cy.get('#scrollable-both').scrollTo('center', { duration: 2000 })</code></pre>
        </div>
        <div class="col-xs-5">
          <div class="well">
            <div id="scrollable-horizontal" style="height: 200px; width: 300px; overflow: auto;">
              <div style="width: 3000px">
                Horizontal Scroll
                <ul>
                  <li>
                    <div class="placeholder"></div>
                  </li>
                  <li>
                    <div class="placeholder"></div>
                  </li>
                  <li>
                    <div class="placeholder"></div>
                  </li>
                  <li>
                    <div class="placeholder"></div>
                  </li>
                  <li>
                    <div class="placeholder"></div>
                  </li>
                  <li>
                    <div class="placeholder"></div>
                  </li>
                  <li>
                    <div class="placeholder"></div>
                  </li>
                  <li>
                    <div class="placeholder"></div>
                  </li>
                  <li>
                    <div class="placeholder"></div>
                  </li>
                  <li>
                    <div class="placeholder"></div>
                  </li>
                  <li>
                    <div class="placeholder"></div>
                  </li>
                  <li>
                    <div class="placeholder"></div>
                  </li>
                  <li>
                    <div class="placeholder"></div>
                  </li>
                  <li>
                    <div class="placeholder"></div>
                  </li>
                  <li>
                    <div class="placeholder"></div>
                  </li>
                </ul>
              </div>
            </div>

            <div id="scrollable-vertical" style="height: 150px; width: 300px; overflow: auto;">
              <div style='height: 1000px'>
                Vertical Scroll
                <ul>
                  <li>
                    <div class="placeholder"></div>
                  </li>
                  <li>
                    <div class="placeholder"></div>
                  </li>
                  <li>
                    <div class="placeholder"></div>
                  </li>
                  <li>
                    <div class="placeholder"></div>
                  </li>
                  <li>
                    <div class="placeholder"></div>
                  </li>
                  <li>
                    <div class="placeholder"></div>
                  </li>
                  <li>
                    <div class="placeholder"></div>
                  </li>
                  <li>
                    <div class="placeholder"></div>
                  </li>
                </ul>
              </div>
            </div>

            <div id="scrollable-both" style="height: 150px; width: 300px; overflow: auto;">
              <div style="width: 1000px; height: 1000px; position: relative;">
                Both Scroll
                <button class="btn btn-danger" style="position: absolute; top: 500px; left: 500px">I'm Here</button>
              </div>
            </div>
          </div>
        </div>

        <div class="col-xs-12"><hr></div>

        <div class="col-xs-7">
          <h4 id="trigger"><a href="https://on.cypress.io/trigger">.trigger()</a></h4>
          <p>To trigger an event on a DOM element, use the <a href="https://on.cypress.io/trigger"><code>.trigger()</code></a> command.</p>
          <pre><code class="javascript">// To interact with a range input (slider)
// we need to set its value & trigger the
// event to signal it changed

// Here, we invoke jQuery's val() method to set
// the value and trigger the 'change' event
cy.get('.trigger-input-range')
  .invoke('val', 25)
cy.get('.trigger-input-range')
  .trigger('change')
cy.get('.trigger-input-range')
  .get('input[type=range]').siblings('p')
  .should('have.text', '25')</code></pre>
        </div>
        <div class="col-xs-5">
          <div class="well">
            <form>
            <fieldset>
              <label for="range-input">Range Input</label>
              <input class="trigger-input-range" name="range-input" type="range" value="0" />
              <p>0</p>
            </fieldset>
          </form>
          </div>
        </div>

        <div class="col-xs-12"><hr></div>
      </div>
    </div>
  </div>

  <script src="/assets/js/vendor/jquery-1.12.0.min.js"></script>
  <script src="/assets/js/vendor/bootstrap.min.js"></script>
  <script src="/assets/js/vendor/highlight.pack.js"></script>
  <script src="/assets/js/scripts.js"></script>
</body>
</html>
